<template>
  <div>
    <div class="d-flex justify-content-between">
      <h4 class="panel-title">
        <span>我的消息</span>
        <span class="panel-title-num" v-show="totalMessageCount">{{ totalMessageCount }}</span>
      </h4>
      <span class="text-muted cursor-pointer" @click="historyVisible = true">
        <span class="mr-1">历史消息</span>
        <i class="fa fa-angle-right"></i>
      </span>
    </div>
    <div :style="{ height: `${height}px` }" v-if="totalMessageCount">
      <el-table :data="tableData" v-loading="loading" border class="table-sm">
        <el-table-column label="消息名称" prop="messageText" align="center"></el-table-column>
        <el-table-column label="消息数量" prop="messageCount" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showDialog(scope.row)">
              <i class="fa fa-search"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="query-pagination">
        <div></div>
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :current-page.sync="params.index"
          :page-size="params.size"
          :total="totalCount"
          @current-change="setData"
        ></el-pagination>
      </div>
    </div>
    <div
      v-else
      class="p-5 text-center text-muted"
      :style="{ height: `${height}px`, overflowY: 'auto' }"
    >
      <i class="fa fa-check-circle" style="font-size: 2rem; margin: 2rem 0 1rem"></i>
      <p class="text-center">暂无消息</p>
    </div>

    <panel-message-history-dialog :visible.sync="historyVisible"></panel-message-history-dialog>
  </div>
</template>

<script>
import PanelMessageHistoryDialog from '@/credit/views/city/index/message/PanelMessageHistoryDialog'
export default {
  components: {
    PanelMessageHistoryDialog,
  },
  props: {
    height: {
      type: Number,
      default: 300,
    },
  },
  data() {
    return {
      historyVisible: false,
      loading: false,
      params: {
        index: 1,
        size: 5,
      },
      tableData: [],
    }
  },
  computed: {
    totalCount() {
      return this.messages.length
    },
    messages() {
      return [
        { messageType: 0, messageText: '推荐提示', messageCount: 1 },
        { messageType: 1, messageText: '拒绝反馈', messageCount: 2 },
        { messageType: 2, messageText: '受理提示', messageCount: 2 },
        { messageType: 3, messageText: '调查完成', messageCount: 2 },
        { messageType: 4, messageText: '审批提示', messageCount: 2 },
        { messageType: 5, messageText: '保函回执', messageCount: 2 },
        { messageType: 6, messageText: '放款提示', messageCount: 2 },
        { messageType: 7, messageText: '异常提示', messageCount: 2 },
        { messageType: 8, messageText: '收费提示', messageCount: 2 },
        { messageType: 9, messageText: '到账提示', messageCount: 2 },
      ]
    },
    totalMessageCount() {
      return this.messages.reduce((prev, curr) => prev + (curr.messageCount || 0), 0)
    },
  },
  watch: {
    tasks: {
      handler: function () {
        this.setData()
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  created() {},
  methods: {
    setData() {
      this.tableData = this.messages.slice(
        (this.params.index - 1) * this.params.size,
        this.params.index * this.params.size
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.panel-title {
  position: relative;
  font-size: 1.142857rem;

  .panel-title-num {
    position: absolute;
    right: -1rem;
    padding: 0 0.21rem;
    border-radius: 1rem;
    background-color: red;
    font-size: 10px;
    color: #fff;
    line-height: 1;
    display: inline-block;
    text-align: center;
  }
}
</style>
